<template>
    <a-modal
        v-bind="defaultModalProps"
        v-model:open="open"
        :width="660"
        class="work-address-map-modal"
        :footer="null"
        destroy-on-close
    >
        <template #title>
            <header class="h-12 leading-12 font-normal text-base text-primary px-4">
                {{ title }}
            </header>
        </template>
        <div class="w-full h-[420px] box-border">
            <BaiduMap class="size-full" v-bind="defaultMapProps" :center>
                <BmMarker :position="center" :icon>
                    <BmOverlay pane="labelPane" class="overlay-pane" @draw="draw">
                        <div class="arbitrary">
                            <p class="maxline2 w-full">
                                {{ overlayContent }}
                            </p>
                        </div>
                    </BmOverlay>
                </BmMarker>
            </BaiduMap>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { BaiduMap, BmOverlay, BmMarker } from 'vue-baidu-map-3x';
import { defaultModalProps, defaultMapProps, defCenter } from '@/constants/comp-setting';
import { type Exposed } from './types'
defineOptions({
    name: 'WorkAdressMapModal',
    inheritAttrs: false
})
defineExpose<Exposed>({
    open(address) {
        title.value = address.regionName
        overlayContent.value = address.address
        center.value = {
            lng: address.lng!,
            lat: address.lat!
        }
        open.value = true
    }
})
const open = ref(false)
const center = ref(defCenter)
const overlayWidth = ref(200)
const title = ref<string>()
const overlayContent = ref<string>()
const icon = {
    url: '/images/map-marker.png', 
    size: {
        width: 24, 
        height: 24
    },
    opts: {
        anchor: {
            width: 16,
            height: 32
        }
    }
}
function draw({ el, BMap, map }: any) {
    const { lng, lat } = toValue(center)
    const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
    const width = overlayWidth.value || el.getBoundingClientRect().width
    el.style.left = pixel.x - width / 2 + 'px'
    el.style.top = pixel.y - 86 + 'px'
    if (!overlayWidth.value && width) {
        overlayWidth.value = width
    }
};
</script>
<style lang="less" scoped>
:global(.work-address-map-modal .ant-modal-content) {
    padding-inline: 0 !important;
    padding-block-start: 0 !important;
}
:global(.work-address-map-modal .ant-modal-footer) {
    padding-inline: 32px;
}
.overlay-pane {
    position: absolute;
    box-sizing: border-box;
    width: 200px;
    height: 40px;
    overflow: visible;
    .arbitrary {
        border-radius: 8px;
        background-color: #ffffff;
        width: max-content;
        max-width: 260px;
        height: auto;
        max-height: 68px;
        padding-inline: 16px;
        padding-block: 12px;
        color: var(--color-primary);
        font-size: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%);
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border: 8px solid transparent;
        border-block-start-color: #ffffff;
    }
}
</style>